<template>
  <a-modal :visible="visible" :maskClosable="false"
           @cancel="hideModal" :width="width+'mm'">
    <a-spin :spinning="spinning" style="min-height: 100px">
      <div id="preview_content_design" ref="printArea"></div>
    </a-spin>
    <template slot="title">
      <a-space>
        <div style="margin-right: 20px">打印预览</div>
        <a-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</a-button>
        <a-button type="primary" icon="printer" @click.stop="toPdf">pdf</a-button>
      </a-space>
    </template>
    <template slot="footer">
      <a-button key="close" type="info" @click="hideModal">
        关闭
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import html2canvas from '@wtto00/html2canvas';
import jsPDF from 'jspdf';
import * as dd from 'dingtalk-jsapi'
export default {
  name: "printPreview",
  props: {},
  data() {
    return {
      visible: false,
      spinning: true,
      waitShowPrinter: false,
      // 纸张宽 mm
      width: 0,
      // 模板
      hiprintTemplate: {},
      // 数据
      printData: {}
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    hideModal() {
      this.visible = false
    },
    show(hiprintTemplate, printData, width = '210') {
      this.visible = true
      this.spinning = true
      this.width = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width;
      this.hiprintTemplate = hiprintTemplate
      this.printData = printData
      setTimeout(() => {
        // eslint-disable-next-line no-undef
        //在这个元素中，将这个数据放入模板数据中，同时将这个模板放入这个元素的html中
        $('#preview_content_design').html(hiprintTemplate.getHtml(printData))
        this.spinning = false
      }, 500)
    },
    print() {
      this.waitShowPrinter = true
      //用于将打印的数据给到打印。启动打印的操作
      this.hiprintTemplate.print(this.printData, {}, {
        callback: () => {
          console.log('callback')
          this.waitShowPrinter = false
        }
      })
    },
    async toPdf() {
      //如下这个操作是将模板保存成pdf版本，没有数据
      // this.hiprintTemplate.toPdf({}, '打印预览');
      //如下这个操作是将模板保存成pdf版本，有数据
      // scale为PDF清晰度，越高文件越大，浏览器约卡
      // isDownload true为直接下载，false为先打开新的窗口预览
      // type：''、'arraybuffer'、'dataurl'、'bloburl'、'dataurlstring'、'pdfobjectnewwindow'
      // this.hiprintTemplate.toPdf(this.printData, '打印预览11')

      this.hiprintTemplate.toPdf(this.printData, '打印预览11'
      ,{scale: 2,isDownload: false, type: 'blob'}).then((res)=>{
         // 将 Blob 转换为 base64 编码的 Data URL
         console.log(res)
        const reader = new FileReader();
        reader.readAsDataURL(res);
        reader.onloadend = function() {
        const base64data = reader.result;
        console.log(base64data)

          // 使用钉钉JSAPI打开链接
          dd.biz.util.openLink({
            url: base64data, // 这里是你的PDF的base64数据URL
            onSuccess: function(result) {
              // 打开成功
              console.log('打开成功')
            },
            onFail: function(err) {
              // 打开失败
              console.error(err);
            }
          });
        };


        // 浏览器正常打开的样式
        // console.log(res)
        // const url = URL.createObjectURL(res);
        // const printWindow = window.open(url);
        // printWindow.onload = function() {
        //   printWindow.print();
        // };

        // 钉钉中打开的方式
        // console.log(res);
        // const urlData = URL.createObjectURL(res);
        // console.log(urlData)
        


        // 打开新窗口
        // window.open(urlData);

        // // 等待新窗口加载完成后调用打印
        // setTimeout(() => {
        //     window.print();
        // },1000)
        
        // 在钉钉内置浏览器中打开PDF文件
        // window.open(url);

        // // 尝试触发打印功能
        // setTimeout(() => {
        //   window.print();
        // }, 1000);


      });



    

    },
  }
}

</script>
<style lang="less" scoped>
/deep/ .ant-modal-body {
  padding: 0px;
}

/deep/ .ant-modal-content {
  margin-bottom: 24px;
}
</style>
